<template>
<!-- 产品分类 -->
    <div id="proClass">
        <crumbsbar :crumbs="crumbsInfo" @handlerSearch="handlerSearch" :search_word='select_word'>
            &nbsp;
        </crumbsbar>

        <!-- 表格 -->
        <div class="container">
            <div class="table-box">
                <div class="table-box-add" :class="{'table-box-add-active':!is_add}">
                    <div class="table-box-add-btn" v-if="is_add" @click="addClassify">
                        +添加产品分类
                    </div>
                    <div class="table-box-add-info" v-if="!is_add">
                        <el-row>
                            <el-col :span="20">
                                <el-form :model="addForm" :rules="addrules" ref="addForm">
                                    <el-row>
                                        <el-col :span="6" :offset="6">
                                            <el-form-item prop="sort">
                                                <el-input class="input-add" maxlength="9" v-model.number="addForm.sort" placeholder="排序"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6" :offset="6">
                                            <el-form-item prop="name">
                                                <el-input class="input-add" maxlength="20" v-model.trim="addForm.name" placeholder="新的产品分类(必填)"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>

                                </el-form>

                            </el-col>
                            <el-col :span="4">
                                <el-button size="small" class="font-c" style="border:1px solid #7D72E4" @click="submitForm('addForm')">保存</el-button>
                                <el-button size="small" class="font-c" style="border:1px solid #7D72E4" @click="is_add=true">取消</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <el-table :data="tableData" border class="pro-class-table" ref="multipleTable" row-key="id" stripe>
                    <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                    <el-table-column prop="id" label="ID" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="sort" label="排序" align="center">
                    </el-table-column>
                    <el-table-column prop="name" label="产品分类" align="center">
                    </el-table-column>

                    <el-table-column label="操作" width="250" align="center">
                        <template slot-scope="scope">
                            <el-button class="font-c" style="border:1px solid #7D72E4" size="small" @click.stop="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button class="font-c" style="border:1px solid #7D72E4" size="small" @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>


        </div>
        <!-- 分页 -->
        <page class="page" :orderList="tableData" :totalCount="totalCount" :page="page" :limit="limit" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></page>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%" center>
            <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
                <el-form-item label="产品分类" prop="name">
                    <el-input maxlength="20" v-model.trim="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input maxlength="9" v-model.trim="editForm.sort"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button class="font-c" size="small" @click="saveEdit('editForm')">确 定</el-button>
                <el-button class="font-c" size="small" @click="editVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name:'proClass',
    data() {
        return {
            crumbsInfo:{
                name:'产品分类',
                placeholder:'检索产品分类',
                span:[7,0],
                class:'t-a-r'
            },
            tableData: [],          //表格数据
            select_word: '',        //搜索关键词
            idx: -1,                //选中数据index
            /** 分页部分*/
            totalCount:200,         //数据总数
            limit:10,            //每页数据量
            page:1,             //当前页码

            // 添加分类表单
            add_form_b:false,       //添加框显隐
            editVisible: false,
            addForm: {
                name: '',
                sort:1000
            },
            addrules: {
                name: [
                    { required: true, message: '请输入产品类型', trigger: 'change' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'change' },
                    {pattern:/^[\u4E00-\u9FA5A-Za-z0-9]+$/,message:'不能用特殊符号',trigger:'change'}
                ],
                sort: [
                    { required: true, message: '请输入排序', trigger: 'change' },
                    {pattern:/^([1-9][0-9]*)$/,message:'非零开头的数字',trigger:'change'}
                ],
            },
            editForm:{
                name: '',
                sort:1
            },
            editRules: {
                name: [
                    { required: true, message: '请输入分类名称', trigger: 'change' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'change' },
                    {pattern:/^[\u4E00-\u9FA5A-Za-z0-9]+$/,message:'不能用特殊符号',trigger:'change'}
                ],
                sort: [
                    { required: true, message: '请输入排序', trigger: 'change' },
                    {pattern:/^([1-9][0-9]*)$/,message:'非零开头的数字',trigger:'change'}
                ],
            },
            is_add:true,

        }
    },
    created() {
        this.getData()
    },
    methods: {
        handlerSearch(v){
            this.select_word=v;
            this.page=1
            this.getData()
        },
        // 获取数据
        getData() {
            let config ={
                page:(this.page-0),
                limit:(this.limit-0),
                name:this.select_word
            }
            this.$postFetch(this.$api.ClassList,config).then(response=>{
                let res = response.data;
                let data = res.data;
                if(res.code!=1){
                    this.$message.error(data.msg);
                }
                this.tableData = data.rows;
                this.totalCount = data.totalCount;
            }).catch(err=>{console.log(err);})
        },

        // 添加分类
        addClassify(){
            this.is_add=false;
            this.addForm.name='';
            this.addForm.sort=1000;
        },
        // 添加分类--提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$postFetch(this.$api.addClassList,this.addForm).then(response=>{
                        let res = response.data;
                        if(res.code!=1){
                            this.$message.error(res.msg);
                            return;
                        }
                        this.is_add=true;
                        this.$message.success('添加成功!');
                        this.select_word='';
                        this.page=1;
                        this.getData();
                    }).catch(err=>{console.log(err);})
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //操作--删除
        handleDelete(index, row) {
            let options = {
                title: "删除产品分类",
                content:`<div>是否确认 ${row.name}?</div><div style="margin-top:10px;">`
            };
            this.$myconfirm("删除产品分类", options).then(() => {
                this.deleteRow(row.id)
            });
        },
        // 确定删除
        deleteRow(id){
            let data = {id:id}
            this.$postFetch(this.$api.delClassList,data).then(response=>{
                let res = response.data;
                if(res.code!=1){
                    this.$message.error(res.msg);
                    return;
                }
                this.$message.success('删除成功');
                this.page=1;
                this.select_word='';
                // if(this.tableData.length==0){
                    this.getData();
                // }

            }).catch(err=>{console.log(err);})

        },
        // 操作-编辑
        handleEdit(index, row) {
            this.idx = index;
            // console.log(row);
            this.editForm = {
                // gmtCreate: row.gmtCreate,
                // gmtModified: row.gmtModified,
                id: row.id,
                name: row.name,
                // remark: row.remark,
                sort: row.sort,
            }
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit(formName) {
            this.$refs[formName].validate((valid) => {
                if(valid){
                    this.$postFetch(this.$api.editClassList,this.editForm).then(response=>{
                        let res = response.data;
                        if(res.code!=1){
                            this.$message.error(res.msg);
                            this.editVisible = false;
                            return;
                        }
                        this.$set(this.tableData, this.idx, this.editForm);
                        this.editVisible = false;
                        this.$message.success(`编辑成功`);
                        this.select_word='';
                        // this.getData(this.page,this.limit);
                    }).catch(err=>{console.log(err);})
                }else{
                    console.log('error submit!!');
                    return false;
                }

            })
        },

        // 分页导航
        handleCurrentChange(val) {
            this.page = val;
            this.getData();
        },
        // 每页条数切换
        handleSizeChange(v){
            this.limit=v;
            this.getData()
        },
    },
    mounted(){
        // this.$util.fn.rowDrop('pro-class-table',this).then(res=>{
        //     console.log(res);
        // })
    },
}
</script>
<style lang="less" scoped>
    #proClass{


    }
</style>
